import React, { Component } from 'react'
import "./Shop.less"
import { actions, checkedall } from '../../store/modules/shop'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { getCartlist } from '../../store/modules/shop'

export class Shop extends Component {

  componentDidMount() {
    let {
      Shop: {
        reqcartlist,
      }
    } = this.props;
    reqcartlist()
  }

  render() {
    let { cartlist, allcheck, Shop: { delShop, addNum, subNum, allChecked, oneChecked } } = this.props;
    console.log(this.props);
    let totalprice = cartlist.reduce((val, item) => (item.checked ? val + item.price * item.num : val), 0)
    return (
      <div className='shop'>
        {cartlist.map((item,index) => {
          return (
            <div className='kuangjia' key={item.id}>
              <div className='oneshop'>
                <div className='check1'><input type="checkbox" checked={item.checked} onChange={(e) => (oneChecked(e.target.checked, item.id))} /></div>
                <div className='imgbox1'><img src={'http://localhost:1000' + item.img} alt="" /></div>
                <div className='btn1'>
                  <p>{item.goodsname}</p>
                  <p>{item.price * item.num}</p>
                  <div className='changenum'>
                    <button onClick={() => addNum(item.id)}>+</button>
                    {item.num}
                    <button onClick={() => subNum(item.id, item.num)}>-</button>
                    <button onClick={() => delShop(item.id,index)}>删</button>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
        <div className='allprice'>
          <input type="checkbox" checked={allcheck} onChange={(e) => (allChecked(e.target.checked))} />全选
          <div>
            <span className='jishuan'>结算:</span>
            <span>{totalprice}</span>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  cartlist: getCartlist(state),
  allcheck: checkedall(state),
});

const mapDispatchToProps = (dispatch) => {
  return {
    Shop: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Shop);